<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/views/global/taglibs.jsp" %>
<!DOCTYPE>
<html>
  <head>
    <base href="<%=basePath %>">
    <title>Upload</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<%@include file="/views/global/include.jsp" %>
	<link rel="stylesheet" type="text/css" href="static/javascript/global/jcrop/css/jquery.Jcrop.css">
	<style type="text/css">BODY{padding:15px;}</style>
  </head>
  
  <body>
 	<form id="uploadForm" action="upload" method="post" enctype="multipart/form-data" class="validate">
	<div class="form-group">
		<input id="addImageFile" name="file" type="file" title="Please select your file" accept="jpg|jpeg|bmp|gif|png"/>
	</div>
	</form>
	<input type="hidden" id="fileId"/>
	<img id="JcropImg" src="static/images/global/blank.png" width="400" height="400"/>
	<div class="clearfix" id=""></div>
	<div style="margin-top:20px;">
		<button type="button" id="btnSave" class="btn btn-success">CUT 裁剪</button>
	</div>
	
	<%@include file="/views/global/AdminScripts.jsp" %>
	<script type="text/javascript" src="static/javascript/global/jcrop/js/jquery.Jcrop.min.js"></script>
  </body>
<script type="text/javascript">
var jcrop_api;
var scaleFactor = 1;
var size = 400;
$(document).ready(function(){
	$("#addImageFile").on("change", function(){
		var target = this;
		if("" != $.trim($(target).val())){
			$("#uploadForm").goAjax({
				semantic:false,
				data:{},
				success: function(jsonData) {
					if("SUCCESS" == jsonData.state){
						var imgObj = $("#JcropImg");
						$(imgObj).attr("src", jsonData.url);
						$("#fileId").val(jsonData.fileId);
						
						var img = new Image();
						img.src = jsonData.url;
						img.onload = function(){
							scaleFactor = img.height/size;
							var width = img.width* size/img.height;
							$(imgObj).attr("width", width);
							
							$("#JcropImg").Jcrop({
								aspectRatio: 1, allowSelect: false
							}, function(){
								jcrop_api = this;
								jcrop_api.animateTo([0, 0, size, size]);
							});
						}
					}
				}
			});
		}
	});
	
	$("#btnSave").click(function(){
		if(null == jcrop_api){
			$.error("PLEASE UPLOAD IMAGE AND SELECT AREA <br/>请先上传图片并选择区域")
			return false;
		}
		console.log(jcrop_api.tellScaled());
		console.log(scaleFactor);
		
		var dim = jcrop_api.tellScaled();
		$.ajax({
	        type: "GET",
	        url: "${fileServerBasePath}image/sub/"+$("#fileId").val(),
	        data: {
				width: parseInt(dim.w * scaleFactor),
				height: parseInt(dim.h * scaleFactor),
				x: parseInt(dim.x * scaleFactor),
				y: parseInt(dim.y * scaleFactor),
				x2: parseInt(dim.x2 * scaleFactor),
				y2: parseInt(dim.y2 * scaleFactor)
			},
			dataType: "jsonp",
			jsonp: 'jsoncallback',
			cache: true,
	        success: function(jsonData) {
	            console.log(jsonData);
	            if("SUCCESS" == jsonData.state){
	            	art.dialog.data("url", jsonData.url);
    				art.dialog.close();
	            }else {
	            	$.error("UPLOAD IMAGE FAILURE! ");
	            }
	        }
	    });
	});
});
</script>
</html>


